<template>
  <el-input class="ju-month-select"
            :clearable="clearable"
            :disabled="disabled"
            placeholder="请选择月份"
            :value="monthText"
            @clear="() => multiple ? $emit('change',[]) : $emit('change',null)">
    <template #append>
      <el-popover :disabled="disabled"
                  placement="top"
                  trigger="click">
        <el-button slot="reference">
          <ju-icon icon="calendar-month"
                   svg-icon></ju-icon>
        </el-button>
        <div class="text-center border-box month-items">
          <div v-for="item in options"
               :key="`month-item-${item}`"
               class="d-inline-flex align-items-center justify-content-center position-relative border-box month-item"
               :class="{'is-checked':multiple ? value.some(s => s === item.value) : value === item.value}"
               @click.stop="doSelect(item.value)">
            {{ item.text }}
            <ju-icon v-if="multiple ? value.some(s => s === item.value) : value === item.value"
                     class="checked-icon"
                     icon="check"
                     svg-icon></ju-icon>
          </div>
          <div v-if="multiple"
               class="d-inline-flex align-items-center justify-content-center position-relative border-box month-item month-item-all "
               @click.stop="doToggleSelectAll">
            {{ isAllChecked ? "取消全选" : "全选" }}
          </div>
        </div>
      </el-popover>
    </template>
  </el-input>
</template>

<script lang="ts">
  import { Component, Model, Vue, Prop } from "@some21/vue-class-decorator";
  import { sortBy } from "lodash";

  const MONTH_OPTIONS = [
    { value: 1, text: "一月" },
    { value: 2, text: "二月" },
    { value: 3, text: "三月" },
    { value: 4, text: "四月" },
    { value: 5, text: "五月" },
    { value: 6, text: "六月" },
    { value: 7, text: "七月" },
    { value: 8, text: "八月" },
    { value: 9, text: "九月" },
    { value: 10, text: "十月" },
    { value: 11, text: "十一月" },
    { value: 12, text: "十二月" },
  ];
  @Component({
    name: "ju-month-select",
  })
  export default class extends Vue {
    @Model("change", { type: [Array, Number] })
    value;
    @Prop({ type: Boolean, default: false })
    multiple: boolean;
    @Prop({ type: Boolean, default: false })
    disabled: boolean;
    @Prop({ type: Boolean, default: false })
    clearable: boolean;
    options = MONTH_OPTIONS;
    get monthText() {
      if (this.multiple) {
        if (this.value && this.value.length) {
          return sortBy(
            MONTH_OPTIONS.filter(f => this.value.some(s => s === f.value)),
            "value"
          )
            .map(m => m.text)
            .join(",");
        } else {
          return "";
        }
      } else {
        return this.value;
      }
    }
    get isAllChecked() {
      if (this.multiple) {
        return this.options.every(e => this.value.some(s => s === e.value));
      }
    }
    doToggleSelectAll() {
      if (this.isAllChecked) {
        this.$emit("change", []);
      } else {
        this.$emit(
          "change",
          this.options.map(m => m.value)
        );
      }
    }

    doSelect(month) {
      if (this.multiple) {
        if (this.value) {
          const index = this.value.findIndex(f => f === month);
          if (index >= 0) {
            this.value.splice(index, 1);
          } else {
            this.value.push(month);
          }
        } else {
          this.value = [month];
        }
      } else {
        this.value = month;
      }
      this.$emit("change", this.value);
    }
  }
</script>

<style lang="scss" scoped>
  .month-items {
    width: 260px;
  }
  .month-item {
    margin: 2.5px;
    width: 60px;
    height: 50px;
    border: 1px solid var(--theme-gray-200);
    border-radius: var(--theme-radius);
    vertical-align: top;

    &:hover {
      cursor: pointer;
      border-color: var(--theme-primary);
    }
    &.is-checked {
      border-color: var(--theme-primary);
      color: var(--theme-primary);

      .checked-icon {
        position: absolute;
        right: 0;
        top: 0;
        background: var(--theme-primary);
        color: var(--theme-white);
        border-bottom-left-radius: 50%;
      }
    }

    &.month-item-all {
      width: 125px;
      height: 40px;

      color: rgba(var(--theme-orange-rgb), 0.8);
      border-color: rgba(var(--theme-orange-rgb), 0.3);

      &:hover {
        color: var(--theme-orange);
        border-color: currentColor;
      }
    }
  }
</style>
